<template>
  <!-- 头部 -->
  <header class="header-container">
    <div class="navbar">
      <!-- 头部导航栏 -->
      <div class="navbar-item w">
        <!-- 导航栏左侧 -->
        <div class="navbar-left">
          <span>宇智波购欢迎您！</span>
          <router-link to="/login">登录</router-link>
          <span class="line">|</span>
          <router-link to="/register">注册</router-link>
        </div>
        <!-- 导航栏右侧 -->
        <div class="navbar-right">
          <ul>
            <li><router-link to="">我的订单</router-link></li>
            <li><router-link to="">我的购物车</router-link></li>
            <li><router-link to="">我的宇智波购</router-link></li>
            <li><router-link to="">宇智波购会员</router-link></li>
            <li><router-link to="">企业采购</router-link></li>
            <li><router-link to="">关注带土</router-link></li>
            <li><router-link to="">合作招商</router-link></li>
            <li><router-link to="">商家后台</router-link></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- logo 和 搜索框区域 -->
    <div class="ls w">
      <h1>
        <router-link to="/search" class="logo">宇智波购</router-link>
      </h1>
      <div class="search">
        <input type="text" v-model.trim="searchValue" />
        <button @click="sendSearchValue">搜索</button>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      // 搜索框输入的内容
      searchValue: ''
    }
  },
  methods: {
    // 搜索按钮点击事件的事件处理函数
    sendSearchValue() {
      // 编程式导航，跳转到 Search 页面
      this.$router.push({
        name: 'Search',
        params: {
          searchValue: this.searchValue || undefined // 解决传递空字符串，URL显示异常
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header-container {
  color: #686868;
  font-size: 12px;
  a {
    font-size: 12px;
    color: #686868;
  }
  .navbar {
    height: 35px;
    background-color: #eaeaea;
    .navbar-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      .navbar-left {
        .line {
          margin: 0 10px;
        }
      }
      .navbar-right {
        ul {
          display: flex;
          li {
            border-right: solid 1px #b1b1b1;
            &:last-child {
              border: 0;
            }
            a {
              padding: 0 10px;
            }
          }
        }
      }
    }
  }
  .ls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 155px;
    h1 {
      width: 120px;
      height: 60px;
      .logo {
        display: block;
        overflow: hidden;
        text-indent: -9999px;
        width: 120px;
        height: 60px;
        background: url('../assets/images/icons.png') no-repeat -375px -6px;
      }
    }
    .search {
      overflow: hidden;
      width: 560px;
      height: 35px;
      border: solid 2px #e22519;
      input {
        width: 85%;
        height: 100%;
        padding-left: 10px;
        border: 0;
        outline: 0;
      }
      button {
        width: 15%;
        height: 100%;
        border: 0;
        outline: 0;
        color: #fff;
        background-color: #e22519;
        cursor: pointer;
      }
    }
  }
}
</style>
